import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import type {
  LoadingConfig,
  AdaptiveConfig,
  PaginationProps
} from "@pureadmin/table";
import { delay } from "@pureadmin/utils";
import { addDialog } from "@/components/ReDialog";
// import editForm from "./form.vue";
import { message } from "@/utils/message";
import dayjs from "dayjs";
// import { usePublicHooks } from "@/views/system/hooks";
interface FormItemProps {
  id?: string;
  region?: string;
  type?: string;
  area?: string;
  time?: string;
  violation?: string;
  description?: string;
  status?: string;
  date?: string;
  officer?: string;
}

export function useKeyword() {
  const title = "违规行驶时间报警";

  const formModel = ref<FormItemProps>({
    status: "0"
  });
  const date = dayjs(new Date()).format("YYYY-MM-DD");
  const columns: TableColumnList = [
    { label: "报警编号", prop: "报警编号" },
    { label: "车辆编号", prop: "车辆编号" },
    { label: "车牌号", prop: "车牌号" },
    { label: "司机姓名", prop: "司机姓名" },
    { label: "报警类型", prop: "报警类型" },
    { label: "报警时间", prop: "报警时间" },
    { label: "违规地点", prop: "违规地点" },
    { label: "违规情况描述", prop: "违规情况描述" },
    { label: "指定路线", prop: "指定路线" },
    { label: "偏离原因", prop: "偏离原因" },
    { label: "处理状态", prop: "处理状态" },
    { label: "处理时间", prop: "处理时间" },
    { label: "处理人员", prop: "处理人员" },
    {
      label: "操作",
      prop: "操作",
      slot: "operation"
    }
  ];
  const addIcon = useRenderIcon(AddFill);
  const editIcon = useRenderIcon(EditPen);
  const delIcon = useRenderIcon(Delete);
  const rules: any[] = [
    {
      报警编号: "T001",
      车辆编号: "V10234",
      车牌号: "鄂A10234",
      司机姓名: "张三",
      报警类型: "非法时间行驶",
      报警时间: "2024/10/1 22:30",
      违规地点: "武汉市黄陂区前川街道",
      违规情况描述: "在禁行时间段内行驶",
      许可时间: "06:00-22:00",
      违规原因: "延误返回",
      处理状态: "已处理",
      处理时间: "2024/10/1 23:00",
      处理人员: "王五"
    },
    {
      报警编号: "T002",
      车辆编号: "V20456",
      车牌号: "鄂B20456",
      司机姓名: "李四",
      报警类型: "非法时间行驶",
      报警时间: "2024/10/2 5:15",
      违规地点: "武汉市黄陂区武湖路段",
      违规情况描述: "早于许可时间出发",
      许可时间: "06:00-22:00",
      违规原因: "提前出发避免拥堵",
      处理状态: "已处理",
      处理时间: "2024/10/2 5:30",
      处理人员: "赵六"
    },
    {
      报警编号: "T003",
      车辆编号: "V30478",
      车牌号: "鄂C30478",
      司机姓名: "王五",
      报警类型: "非法时间行驶",
      报警时间: "2024/10/2 23:45",
      违规地点: "武汉市黄陂区罗汉寺街道城乡结合部",
      违规情况描述: "禁行时间行驶至限制区域",
      许可时间: "07:00-23:00",
      违规原因: "路线堵塞未及时返程",
      处理状态: "处理中",
      处理时间: "2024/10/3 0:15",
      处理人员: "李四"
    },
    {
      报警编号: "T004",
      车辆编号: "V40567",
      车牌号: "鄂D40567",
      司机姓名: "赵六",
      报警类型: "非法时间行驶",
      报警时间: "2024/10/3 4:30",
      违规地点: "武汉市黄陂区六指街道路段",
      违规情况描述: "提前进入限行区域",
      许可时间: "08:00-20:00",
      违规原因: "避开高峰时间",
      处理状态: "未处理",
      处理时间: "",
      处理人员: ""
    },
    {
      报警编号: "T005",
      车辆编号: "V50678",
      车牌号: "鄂E50678",
      司机姓名: "陈七",
      报警类型: "非法时间行驶",
      报警时间: "2024/10/3 3:10",
      违规地点: "武汉市黄陂区武湖街道沿江区域",
      违规情况描述: "非许可时间段行驶在禁行区域",
      许可时间: "06:00-2:00",
      违规原因: "道路封闭绕行",
      处理状态: "已处理",
      处理时间: "2024/10/4 0:00",
      处理人员: "张三"
    },
    {
      报警编号: "T006",
      车辆编号: "V60789",
      车牌号: "鄂F60789",
      司机姓名: "周八",
      报警类型: "非法时间行驶",
      报警时间: "2024/10/4 6:15",
      违规地点: "武汉市黄陂区木兰山风景区",
      违规情况描述: "在许可时间前出发",
      许可时间: "07:00-3:00",
      违规原因: "避免限行区域堵塞",
      处理状态: "处理中",
      处理时间: "2024/10/4 6:30",
      处理人员: "李四"
    },
    {
      报警编号: "T007",
      车辆编号: "V70890",
      车牌号: "鄂G70890",
      司机姓名: "吴九",
      报警类型: "非法时间行驶",
      报警时间: "2024/10/5 22:45",
      违规地点: "武汉市黄陂区滠口街道",
      违规情况描述: "禁行时间行驶至限行区域",
      许可时间: "06:00-222:00",
      违规原因: "任务延误",
      处理状态: "已处理",
      处理时间: "2024/10/5 23:15",
      处理人员: "王五"
    },
    {
      报警编号: "T008",
      车辆编号: "V80901",
      车牌号: "鄂H80901",
      司机姓名: "郑土",
      报警类型: "非法时间行驶",
      报警时间: "4/10/6 5:45",
      违规地点: "武汉市黄陂区罗汉寺街道城乡结合部",
      违规情况描述: "非许可时间内进入限制区域",
      许可时间: "07:00-20:00",
      违规原因: "提前出发以避开高峰",
      处理状态: "处理中",
      处理时间: "4/10/6 6:00",
      处理人员: "赵六"
    }
  ];
  const formRef = ref();
  const dataList = ref([]);
  const loading = ref(true);
  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 20,
    currentPage: 1,
    pageSizes: [20, 40, 60],
    total: 0,
    align: "right",
    background: true,
    size: "default"
  });

  /** 加载动画配置 */
  const loadingConfig = reactive<LoadingConfig>({
    text: "正在加载第一页...",
    viewBox: "-10, -10, 50, 50",
    spinner: `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
    // svg: "",
    // background: rgba()
  });

  /** 撑满内容区自适应高度相关配置 */
  const adaptiveConfig: AdaptiveConfig = {
    /** 表格距离页面底部的偏移量，默认值为 `96` */
    offsetBottom: 110
    /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
    // fixHeader: true
    /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
    // timeout: 60
    /** 表头的 `z-index`，默认值为 `100` */
    // zIndex: 100
  };

  function onSizeChange(val) {
    console.log("onSizeChange", val);
  }

  function onCurrentChange(val) {
    loadingConfig.text = `正在加载第${val}页...`;
    loading.value = true;
    delay(600).then(() => {
      loading.value = false;
    });
  }

  async function onSearch(newItem?: any) {
    loading.value = true;
    dataList.value = newItem ? [newItem].concat(rules) : rules;
    pagination.total = dataList.value.length;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };
  function handleDelete(row: any) {
    console.log(row, "row");

    message(`操作成功`, { type: "success" });
    onSearch();
  }

  onMounted(() => {
    onSearch();
  });
  return {
    title,
    formModel,
    columns,
    addIcon,
    editIcon,
    delIcon,
    resetForm,
    onSearch,
    loading,
    dataList,
    pagination,
    loadingConfig,
    adaptiveConfig,
    onSizeChange,
    onCurrentChange,
    handleDelete
  };
}
